<template>
	<view class="container">
		<!-- 顶部信息 -->
		<view class="header">
			<view class="header-left">
				<text class="title">{{taskInfo.position}}</text>
				<view class="tags">
					<block v-for="(item, index) in taskInfo.tag" :key="index">
					<text class="tag">{{item.name}}</text>					
					</block>
				</view>
				<text class="price">{{taskInfo.salary}}</text>
			</view>
			<view class="header-right">
				<view class="placeholder"></view>
				<text class="phone">{{taskInfo.phone}}</text>
			</view>
		</view>

		<!-- 中部统计 -->
		<view class="stats">
			<view class="stat-item">
				<text class="stat-value">{{taskInfo.need}}</text>
				<text class="stat-title">需要人数</text>
			</view>
			<view class="stat-item">
				<text class="stat-value">{{taskInfo.choose}}</text>
				<text class="stat-title">已选人数</text>
			</view>
			<view class="stat-item">
				<text class="stat-value">{{taskInfo.daysalary}}</text>
				<text class="stat-title">每人收益</text>
			</view>
		</view>

		<!-- 服务详情 -->
		<view class="service-details">
			<text class="section-title">服务详情</text>
			<view class="detail-item"><text>服务时间：</text><text>{{taskInfo.time}}</text></view>
			<view class="detail-item"><text>服务地址：</text><text>{{taskInfo.address}}</text></view>
			<view class="detail-item"><text>服务总量：</text><text>{{taskInfo.total}}</text></view>
			<view class="detail-item"><text>服务单价：</text><text>{{taskInfo.price}}</text></view>
			<view class="detail-item"><text>其他要求：</text><text>{{taskInfo.other}}</text></view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="footer">
			<button open-type="share" class="share-btn">分享有礼</button>
			
			<button v-if="!taskInfo.registered" class="apply-btn" @click="handleApply()">立即报名</button>
			<button v-else class="applied-btn">已报名</button>
			
		</view>
	</view>
</template>

<script>
	import {
		getTaskData,
		handleApply
	} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			
			...mapGetters(['isLogin'])
			
		},
		data() {
			return {
				taskid: 0,
				taskInfo: {
					position:"position",
					tag:[{name:"按时1"},{name:"按时2"},{name:"按时3"}],
					salary:"260元",
					phone:"123456789",
					need:3,
					choose:2,
					daysalary:"260元",
					time:"2023-10-09 14:13",
					address:"龙华区观澜大道391号粒上皇1",
					total:"2天",
					price:"130.00元/人/天2",
					other:"女性 18-35岁，普通话标准，形象气质佳，亲和力强2",
					registered:0
				}
			};
		},
		onLoad(options) {
			
			this.taskid = options.taskid;
			this.getTaskData();
			console.log("——————————");
		},
		methods: {
			getTaskData() {
				getTaskData({
					task_id: this.taskid
				}).then(res => {
					this.taskInfo=res.data.taskInfo;
					console.log(res);
				});
			},
			handleApply() {
				if (!this.isLogin) {
					this.getIsLogin();
				} else {					
				console.log("----------------")
				handleApply({
					task_id: this.taskid
				}).then(res => {
					console.log(res);
					this.taskInfo.registered = 1 ;
					uni.showToast({
					  title: res.msg,
					  icon: 'none'
					})
				});
			      }
			},
			getIsLogin() {
				toLogin();
			}

		},
		onShareAppMessage() {
		    return {
		      title: '分享标题', // 自定义分享标题
		      path: '', // 分享路径（默认当前页面路径）
		      imageUrl: '', // 可选，分享图片
		      success: (res) => {
		        console.log('分享成功', res);
		      },
		      fail: (err) => {
		        console.log('分享失败', err);
		      }
		    };
		  },
		  // 如果需要支持转发到朋友圈（仅微信小程序）
		  onShareTimeline() {
		    return {
		      title: '分享到朋友圈的标题',
		      query: 'id=123', // 自定义页面参数
		      imageUrl: ''
		    };
		  }

	};
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: white;
		border-bottom: 1px solid #eee;
	}

	.header-left {
		flex: 1;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.tags {
		display: flex;
		margin-top: 10rpx;
	}

	.tag {
		margin-right: 10rpx;
		background-color: #f5f5f5;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	.price {
		color: #ff6600;
		font-size: 40rpx;
		margin-top: 10rpx;
	}

	.header-right {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.placeholder {
		width: 60rpx;
		height: 60rpx;
		background-color: #ddd;
		border-radius: 50%;
		margin-bottom: 10rpx;
	}

	.phone {
		font-size: 28rpx;
	}

	.stats {
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		background-color: white;
		margin-top: 10rpx;
	}

	.stat-item {
		text-align: center;
		display: flex;
		flex-direction: column;
	}

	.stat-title {
		font-size: 28rpx;
		color: #666;
	}

	.stat-value {
		font-size: 36rpx;
		font-weight: bold;
	}

	.service-details {
		background-color: white;
		padding: 30rpx;
		margin-top: 10rpx;
		flex-grow: 1;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.detail-item {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.share-btn,
	.apply-btn {
		flex: 1;
		margin: 0 10rpx;
		background-color: #ff6600;
		color: white;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
	.applied-btn{	flex: 1;
		margin: 0 10rpx;
		background-color: #666666;
		color: white;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		font-size: 28rpx;}
</style>